<template lang="pug">
  .ipAdress(:class="size")
    span(v-for="(item, index) in ipAdress" :key="index")
      el-input(v-model="item.value" ref="ipInput" @input="value => checkIpVal(value, index)" @keyup="() => turnIpPOS(index,$event)" :size="size")
      i
</template>
<script>
import _ from 'lodash'
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'small'
    }
  },
  data () {
    return {
      ipAdress: [
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        }
      ]
    }
  },
  watch: {
    value: {
      handler (val) {
        if (val) {
          const ipArr = val.split('·')
          if (ipArr.length === 4) {
            const { ipAdress } = this
            ipAdress.map((x, index) => {
              x.value = ipArr[index]
              return x
            })
            this.ipAdress = [...ipAdress]
          }
        }
      },
      immediate: true
    },
    ipAdress: {
      handler (val) {
        const ips = _.map(val, 'value').filter(x => !!x)
        if (ips.length === 4) {
          this.$emit('valChange', ips.join('.'))
        }
      },
      deep: true
    }
  },
  methods: {
    checkIpVal (val, index) {
      // 输入时事件
      // 确保每个值都处于0-255
      const self = this
      // 当输入的是空格时，值赋为空
      val = val.trim()
      val = parseInt(val, 10)
      if (isNaN(val)) {
        val = ''
      } else {
        val = val < 0 ? '' : val
        val = val > 255 ? 255 : val
      }
      this.ipAdress[index].value = val
      if (val > 99 && index < this.ipAdress.length - 1) {
        // 判断内容是否可以跳框
        self.$refs.ipInput[index + 1].focus()
      }
      if (val === '' && index !== 0) {
        self.$refs.ipInput[index - 1].focus()
      }
    },
    turnIpPOS (index, event) {
      const self = this
      const e = event || window.event
      // 左箭头向左跳转，左一不做任何措施
      if (e.keyCode === 37) {
        if (index !== 0) {
          self.$refs.ipInput[index - 1].focus()
        }
      }
      // 右箭头、回车键、空格键、冒号均向右跳转，右一不做任何措施
      if (
        e.keyCode === 39 ||
        e.keyCode === 13 ||
        e.keyCode === 32 ||
        e.keyCode === 190
      ) {
        if (index !== 3) {
          self.$refs.ipInput[index + 1].focus()
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.ipAdress {
  display: flex;
  align-items: center;
  border: 1px solid $--border-color-light;
  border-radius: $--border-radius-base;
  box-sizing: content-box;
  height: 30px;
  overflow: hidden;

  &.large{
    height: 40px
  }

  > span {
    position: relative;
    margin: 0;

    /deep/ input{
      border: none;
      text-align: center;
    }

    &:last-child{
      > i {
        display: none;
      }
    }

    > i {
      position: absolute;
      bottom: 50%;
      right: 0;
      margin-bottom: -1px;
      border-radius: 50%;
      background: $--border-color-base;
      width: 2px;
      height: 2px;
    }
  }
}
</style>
